<template>
  <div>
    <Window
      :show="windowConfig.show"
      :width="width"
      :height="height"
      :showCancel="false"
      :buttons="windowConfig.buttons"
      @close="windowConfig.show = false"
    >
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>专题文章</span>
              </div>
            </template>

            <el-tree
              class="tree-panel"
              ref="treeRef"
              :data="blogList"
              default-expand-all
              node-key="blogId"
              :expand-on-click-node="false"
              :props="treeProps"
              :highlight-current="true"
              @node-click="treeNodeClick"
            >
              <template #default="{ node, data }">
                <span class="custom-node-style">
                  <span class="node-title">{{ data.title }}</span>
                  <span v-if="data.status == 0" :style="{ color: 'red' }"
                    >草稿</span
                  >
                  <span v-if="data.status == 1" :style="{ color: 'green' }"
                    >已发布</span
                  >
                </span>
              </template>
            </el-tree>
          </el-card>
        </el-col>
        <el-col :span="14"
          ><el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>文章详情</span>
              </div>
            </template>
            <div v-if="blog.title">
              <div class="my-title">{{ blog.title }}</div>
              <div v-html="blog.content" class="blog-detail"></div> 
            </div>
            <div v-else class="no-data">
              请选择专题文章，查看详情
            </div>
            </el-card>
          </el-col>
      </el-row>

      <!-- <div class="title">{{ blog.title }}</div>
      <div v-html="blog.content" class="blog-detail"></div> -->
    </Window>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css";
const { proxy } = getCurrentInstance();

const props = defineProps({
  width: {
    type: Number,
    required: true,
  },
  height: {
    type: Number,
    required: true,
  },
});

const api = {
  getBlogDetail: "/blog/getBlogById",
  getSpecialInfo: "/blog/getSpecialInfo",
};

const windowConfig = ref({
  show: false,
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        windowConfig.show = false;
      },
    },
  ],
});

const currentBlogId = ref(null);
const blog = ref({});
const showDetail = async (data) => {
  windowConfig.value.show = true;
  currentBlogId.value = data.blogId;
  // 获取所有文章树
  getSpecialInfo(data.categoryId);
  // 获取文章详情
  showBlogDetail(data.blogId);
};
defineExpose({ showDetail });

const showBlogDetail = async (blogId) => {
  let result = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    return;
  }
  blog.value = result.data;
  nextTick(() => {
    // 代码高亮
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
};

const blogList = ref([]);
const getSpecialInfo = async (categoryId) => {
  let result = await proxy.Request({
    url: api.getSpecialInfo,
    params: {
      categoryId: categoryId,
      showType: "1",
    },
  });
  if (!result) {
    return;
  }
  blogList.value = result.data;
  nextTick(() => {
    treeRef.value.setCurrentKey(currentBlogId.value);
  });
};

// 专题树
const treeRef = ref(null);
const treeProps = {
  children: "children",
  label: "title",
  value: "blogId",
};
const treeNodeClick = (data) => {
  if (data.blogId == 0) {
    blog.value = {};
    return;
  }
  showBlogDetail(data.blogId);
};
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-size: large;
  font-weight: bold;
}

.blog-detail {
  blockquote {
    padding: 0 1em;
    color: gray;
    border-left: 0.25em solid lavender;
  }
  ::v-deep(img) {
    max-width: 80%;
  }
}

.tree-panel {
  height: calc(100vh - 299px);
  overflow: auto;
  .custom-node-style {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
}
</style>